<template>
  <div class="mypage">
    <!-- 头部 -->
    <div class="header">
      <div class="hbg">
        <van-nav-bar left-arrow @click-left="onClickLeft" />
      </div>
      <div class="car">
        <p class="top">{{ username }}</p>
        <span class="gxqm">哈哈哈哈啊哈哈哈哈</span>
        <div class="ca-context">
          <div class="item">
            <p>已完成</p>
            <p class="chara">{{ this.finish }}</p>
          </div>
          <div class="item">
            <p>待服务</p>
            <p class="chara">13</p>
          </div>
          <div class="item">
            <p>已支付</p>
            <p class="chara">67</p>
          </div>
          <div class="item">
            <p>余额</p>
            <p class="chara">2319</p>
          </div>
        </div>
      </div>
      <div class="photo">
        <van-image round width="5rem" height="5rem" :src="userFace" />
      </div>
    </div>
    <div class="dateils">
      <p>手机号：{{ this.telephone }}</p>
      <p>身份证号：{{ this.idCard }}</p>
      <p>银行卡号:{{ this.bankCard }}</p>
      <div class="cardphoto">
        <p>银行卡正面</p>
        <img width="300px" height="200px" :src="idcardPhotoNegative" />
      </div>
      <div>
        <p>银行卡背面</p>
        <img width="300px" height="200px" :src="idcardPhotoPositive" />
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/http/axios.js";

export default {
  data() {
    return {
      userFace: "",
      username: localStorage.getItem("username"),
      employeeId: "",
      finish: "",
      telephone: "",
      bankCard: "",
      idCard: "",
      idcardPhotoNegative: "",
      idcardPhotoPositive: "",
    };
  },
  computed: {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },

    async getAllinfoCategoryData(values) {
      let data = {
        page: 1,
        pageSize: 10,
        // roleId: 1,
        username: localStorage.getItem("username"),
      };
      let res = await get("/baseUser/pageQuery", data);
      this.userFace = res.data.data.list[0].userFace;
      this.idcardPhotoPositive = res.data.data.list[0].idcardPhotoPositive;
      this.idcardPhotoNegative = res.data.data.list[0].idcardPhotoNegative;
      this.telephone = res.data.data.list[0].telephone;
      this.bankCard = res.data.data.list[0].bankCard;
      this.idCard = res.data.data.list[0].idCard;
    },
    async getOrderData() {
      let data = {
        page: 1,
        pageSize: 10,
        status: "已完成",
        employeeId: this.employeeId,
      };
      let res = await get("/order/pageQuery", data);
      this.finish = res.data.data.total;
    },
  },
  created() {
    this.getAllinfoCategoryData();
    this.getOrderData();
  },
  mounted() {},
};
</script>
<style scoped>
.hbg {
  position: absolute;
  top: 0;
  width: 100%;
  background: #7cabf7;
  background: -webkit-linear-gradient(to bottom, #a1c4fd, #c2e9fb);
  background: linear-gradient(to bottom, #a1c4fd, #c2e9fb);
  height: 180px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.car {
  position: absolute;
  width: 90%;
  height: 170px;
  background-color: #fff;
  opacity: 0.8;
  box-shadow: 0 0 10px #ccc;
  border-radius: 8px;
  margin-left: 5%;
}

.photo {
  width: 50%;
  height: 80px;
  position: absolute;
  margin-left: 23%;
  top: 30px;
}

.but {
  width: 53%;
  margin-top: 30px;
}
.mypage {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.top {
  margin-top: 50px;
  margin-bottom: 0px;
}
.ca-context {
  margin-top: 0px;

  display: flex;
  justify-content: space-evenly;
}
.van-nav-bar {
  height: 0;
}
::v-deep .van-icon {
  color: white;
  font-size: 1.5rem;
}
.dateils {
  position: absolute;
  margin-top: 200px;
  padding: 0 2em;
  font-size: 14px;
  color: #333;
  text-align: center;
}

.gxqm {
  font-size: 12px;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: 0.081em;
  font-weight: 300;
  color: #081fa3;
}
.chara {
  color: #081fa3;
  font-weight: 600;
}
</style>